@header-height: 42px;

.darkBorder() {
  border: 1px solid;
  border-image-source: linear-gradient(181deg, rgba(6, 183, 253, 0.4) 3.03%, #51FBFF 47.23%, rgba(6, 183, 253, 0.4) 91.41%);
  background: #003E7E6B;
  outline: none;
  box-shadow: 0px 0px 12px 0px #06B7FDCC inset;
  color: #fff;
}


.stationPopup {
  .ant-modal {
    background: transparent;

    .ant-modal-content {
      background: transparent;


      // 关闭区域样式
      .ant-modal-close {
        height: @header-height;

        .ant-modal-close-x {
          width: 90px !important;
          height: @header-height  !important;
          color: #fff;
        }
      }

      // 弹窗头部样式
      .ant-modal-header {
        background: url(@/assets/images/dialog/header_bg.png) no-repeat;
        height: @header-height;
        display: flex;
        align-items: center;
        position: relative;
        border: none;

        &::before {
          content: '';
          position: absolute;
          top: 12px;
          left: 24px;
          width: 18px;
          height: 18px;
          background: url(@/assets/images/dialog/title_icon.png) no-repeat;
        }

        .ant-modal-title {
          padding-left: 24px;

          .basic-title {
            font-family: 江城斜黑体;
            font-size: 24px;
            font-style: italic;
            font-weight: 900;
            text-align: left;
            color: #fff;
          }

        }
      }

      // 弹窗内容区域样式
      .ant-modal-body {
        //border: 2px solid;
        //border-image-source: linear-gradient(180deg, rgba(6, 183, 253, 0.5) 8.53%, #65D9FF 42.62%, rgba(6, 183, 253, 0.5) 81.06%);
        background: #002851BD;
        box-shadow: 0px 0px 60px 0px #06B7FD inset;

        .scrollbar {
          padding-top: 0;
        }

        // 弹窗内tab样式
        .ant-tabs {
          .ant-tabs-nav {
            &::before {
              border-bottom: 1px solid #DCEDFF33
            }

            .ant-tabs-nav-wrap {
              .ant-tabs-nav-list {
                .ant-tabs-tab {
                  font-family: Source Han Sans CN;
                  font-size: 18px;
                  font-weight: 400;
                  text-align: center;
                  color: #B4DFFF;

                  &.ant-tabs-tab-active {
                    .ant-tabs-tab-btn {
                      color: #2CD9FF;
                    }
                  }
                }

                .ant-tabs-ink-bar {
                  background: transparent;
                  position: absolute;

                  &::before {
                    content: '';
                    position: absolute;
                    bottom: 0px;
                    left: 24px;
                    width: 16px;
                    height: 8px;
                    background: url(@/assets/images/dialog/arrow.png) no-repeat;
                  }
                }
              }
            }
          }
        }



        // 单选框
        .ant-radio-group {


          .ant-radio-button-wrapper {
            .darkBorder();
            color: #666;

            &.ant-radio-button-wrapper-checked {
              color: #fff
            }
          }

        }

        // 弹窗内表单样式
        .ant-form {
          .ant-form-item {
            .ant-form-item-label {
              label {
                font-family: Source Han Sans CN;
                font-size: 18px;
                font-weight: 400;
                color: #B4DFFF;
              }
            }

            .ant-form-item-control {
              .ant-form-item-control-input-content {
                // border: 1px solid;
                // border-image-source: linear-gradient(181deg, rgba(6, 183, 253, 0.4) 3.03%, #51FBFF 47.23%, rgba(6, 183, 253, 0.4) 91.41%);
                // background: #003E7E6B;
                // outline: none;
                // box-shadow: 0px 0px 12px 0px #06B7FDCC inset;

                // 时间选择框
                .ant-picker {
                  .darkBorder();

                  .ant-picker-input {
                    input {
                      color: #fff;
                    }
                  }

                  .ant-picker-separator {
                    color: #fff;
                  }

                  .ant-picker-suffix {
                    color: #fff;
                  }
                }


                // 下拉框
                .ant-select {
                  .ant-select-selector {
                    .darkBorder();


                    .ant-select-selection-overflow {
                      .ant-select-selection-overflow-item {
                        .ant-select-selection-item {
                          background: transparent;
                          border: 1px solid #999;

                          .ant-select-selection-item-remove {
                            color: #fff;
                          }
                        }
                      }
                    }
                  }

                  .ant-select-arrow {
                    color: #fff;
                  }
                }


                // 单选框
                .ant-radio-group {
                  .ant-radio-wrapper {
                    &.ant-radio-wrapper-checked {
                      color: #539ef1
                    }

                    color: #fff
                  }

                  .ant-radio-button-wrapper {
                    .darkBorder();
                  }

                }


                // 按钮
                .ant-btn {
                  .darkBorder();
                }
              }
            }
          }
        }







      }
    }
  }
}



// 弹窗内表格样式
.stationPopup {

  .materialList {
    li {
      color: #fff !important;

      p {
        color: #fff !important;
      }
    }
  }


  .canalList {
    .listItem {
      em {
        color: #fff !important;
      }

      span {
        color: #fff !important;
      }
    }
  }

  .materialImages {
    h3 {
      color: #fff !important;
    }

  }

  .showTableBtn {
    background: red;
  }




  .vxe-table tr.vxe-header--row {
    background: #38648A;
    color: #D7EEFF;
  }

  .vxe-header--column .vxe-resizable {
    background: #38648A;
    bottom: 1px;
  }

  .vxe-table--header {
    position: relative;

    &::before {
      content: "";
      width: 2px;
      height: 20px;
      background: #D7EEFF;
      position: absolute;
      left: 0;
      opacity: 0.8;
      top: 14px;
    }

    &::after {
      content: "";
      width: 2px;
      height: 20px;
      background: #D7EEFF;
      position: absolute;
      right: 0;
      opacity: 0.8;
      top: 14px;
      z-index: 9;
    }

    .vxe-cell--title {
      position: relative;

      &::after {
        content: "";
        width: 0;
        height: 0;
        display: inline-block;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #06B7FD;
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translate(-50%);
      }
    }
  }

  .vxe-header--column {
    background-image: unset !important;
  }

  .vxe-table--border-line {
    display: none;
  }

  .vxe-table--body {
    background: transparent !important;

    .vxe-cell {
      margin-top: 2px !important;
      // margin-bottom: 2px !important;
      padding-top: 10px;
      padding-bottom: 10px;
      height: 40px;
      line-height: 20px;
      border-top: 1px solid #2B557B;
      border-bottom: 1px solid #2B557B;
      // .vxe-cell--label {
      //   line-height: 40px;
      //   height: ;
      // }
    }
  }

  .vxe-body--column {
    // margin: 10px 0;
    color: #fff !important;
    background-image: unset !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .vxe-table--header-border-line {
    display: none !important;
  }

  .vxe-table--body .row--hover {
    color: #fff !important;
    background-image: unset !important;
    background: transparent !important;

    .vxe-cell {
      background: #877945;
    }
  }

  .vxe-table--body .row--current {
    color: #fff !important;
    background-image: unset !important;
    background: transparent !important;
    position: relative;

    .vxe-cell {
      background: #877945;
    }
  }

  .row--stripe {
    background: transparent !important;
  }

  .ant-empty-description {
    color: #fff;
  }

  .minMaxList {
    color: #fff;
  }



  .listItemIndex {
    width: 40px;
    height: 32px;
    display: inline-block;
    background: url(@/assets/images/dialog/table_cord.png) no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Title;
    font-size: 18px;
    line-height: 18px;
    font-weight: normal;
    position: relative;
    z-index: 1000;
    vertical-align: top;
    margin-top: -7px;

    &::before {
      content: '';
      width: 24px;
      height: 24px;
      display: inline-block;
      border-radius: 50%;
      background: linear-gradient(1.27deg, rgba(0, 74, 106, 0.5) 0.68%, rgba(6, 183, 253, 0.5) 92.44%);
      border: 1px solid rgba(220, 237, 255, 0.32);
      position: absolute;
      z-index: -1;
    }

    &::after {
      content: '';
      width: 0;
      height: 0;
      display: inline-block;
      border: 4px solid transparent;
      border-left: 4px solid #5ACBFD4D;
      position: absolute;
      right: -8px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;
    }

    &.highLight {
      background: url(@/assets/images/dialog/table_cord_orange.png) no-repeat;

      &::before {
        background: linear-gradient(1.27deg, rgba(213, 164, 62, 1) 0.68%, rgba(213, 164, 62, 0.7) 92.44%);
      }

      &::after {
        border-left: 4px solid #D5A43E;
      }
    }
  }



  .ant-table {
    background: linear-gradient(to right, #1D4B76, #093255) !important
  }

  .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table {
    border-top: 0
  }

  .ant-table.ant-table-bordered>.ant-table-container {
    border-left: 0;
  }

  .ant-table-header .ant-table-thead {
    background: #38648A !important;
    color: #D7EEFF;
    border-right: 1px solid #D7EEFF !important;

    position: relative;

    &::before {
      content: "";
      width: 4px;
      height: 20px;
      background: #D7EEFF;
      position: absolute;
      left: 0;
      opacity: 0.8;
      top: 10px;
    }

    &::after {
      content: "";
      width: 4px;
      height: 20px;
      background: #D7EEFF;
      position: absolute;
      right: 2px;
      opacity: 0.8;
      top: 10px;
      z-index: 9;
    }

    .ant-table-cell {
      position: relative;

      &:not(.ant-table-cell-scrollbar) {
        &::after {
          content: "";
          width: 0;
          height: 0;
          display: inline-block;
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-top: 4px solid #06B7FD;
          position: absolute;
          bottom: 4px;
          left: 50%;
          transform: translate(-50%);
        }
      }
    }


  }

  .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table>thead>tr>th {
    border-right: 1px solid #38648A !important;
  }

  .ant-table.ant-table-bordered>.ant-table-container>.ant-table-body>table>tbody>tr>td {
    border-right: 1px solid #2B557B;
  }

  .ant-table-tbody>tr>td {
    border-bottom: 1px solid #2B557B;
  }

  .ant-table-thead>tr>th {
    background: transparent !important;
    color: #D7EEFF !important;


  }

  .ant-table-thead>tr>th {
    border-bottom: transparent;

  }

  .ant-table-body>table>tbody>tr>td {
    background: transparent !important;
    color: #fff;
  }

  .pagination {
    background: #0B3559 !important;
    border-top: 1px solid #2B557B !important;
  }





  .vxe-icon-caret-right::before {
    color: #66FFFB !important;
    font-size: 30px;
    // line-height: 14px;
    top: -10px;
    left: -1px;
    position: absolute;
  }

  .vxe-icon-caret-right {
    &.rotate90::before {
      top: -10px;
      left: -1px;
      position: absolute;
    }
  }

  .ant-btn-link {
    color: #d7eeff !important;
  }

  .ant-btn-primary[disabled] {
    background: #38648A !important;
    color: #d7eeff !important;
    border-color: #709BB9 !important
  }

  .table-edit {
    color: #D7EEFF;
  }

  .tableInfo {
    td {
      color: #fff !important;
      border: 1px solid #2B557B !important;
    }

    .fieldName {
      background: transparent !important;
      color: #D7EEFF !important;
    }
  }

  .schemeList {
    ul.list li p {
      span {
        color: #D7EEFF !important;
      }

      em {
        color: #fff !important;
      }
    }
  }
}
